export function useColumns() {
  const columns: TableColumnList = [
    {
      type: "selection",
      align: "left"
    },
    {
      label: "网格员ID",
      prop: "insId",
      width: "120"
    },
    {
      label: "姓名",
      prop: "insName",
      width: "150"
    },
    {
      label: "联系电话",
      prop: "insTel",
      width: "200"
    },
    {
      label: "家庭住址",
      width: "430",
      prop: "insAddress"
    },
    {
      label: "网格员状态",
      prop: "insState",
      width: "130",
      cellRenderer: ({ row }) => (
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          {{
            default: () => (
              <div>
                <div v-show={row.insState === 0}>
                  <div>原因：该网格员未完成任务数已达上限</div>
                </div>
                <div v-show={row.insState === 1}>
                  <div>该网格员还可指派任务数：3</div>
                </div>
                <div v-show={row.insState === 2}>
                  <div>原因：该网格员已请假</div>
                </div>
              </div>
            ),
            reference: () => (
              <div>
                <el-tag
                  v-show={row.insState === 1}
                  type="success"
                  effect="dark"
                >
                  可指派
                </el-tag>
                <el-tag
                  v-show={row.insState === 0 || row.insState === 2}
                  type="danger"
                  effect="dark"
                >
                  不可指派
                </el-tag>
              </div>
            )
          }}
        </el-popover>
      )
    },
    {
      label: "未完成任务数",
      prop: "remarks",
      width: "130"
    }
  ];

  return {
    columns
  };
}
